<template>
	<popup ref="popupRef" :title="popupTitle" :async="true" width="880px" cancelButtonText="" confirmButtonText=""
		@close="handleClose">
		<div class="mt-[-28px]">
			<el-card class="!border-none" v-loading="pager.loading" shadow="never">
				<el-button v-perms="['user.user_group_rule/add']" type="primary" @click="handleAdd">
					<template #icon>
						<icon name="el-icon-Plus" />
					</template>
					新增
				</el-button>
				<div class="mt-4">
					<el-table :data="pager.lists">
						<el-table-column label="第几单" prop="num" show-overflow-tooltip />
						<el-table-column label="金额类型" prop="money_type" show-tooltip-when-overflow>
							<template #default="{ row }">
								<div v-if="row.money_type == 1">固定值</div>
								<div v-if="row.money_type == 2">百分比</div>
							</template>
						</el-table-column>
						<el-table-column label="订单金额" show-overflow-tooltip>
							<template #default="{ row }">
								<div v-if="row.money_type == 1">{{row.money}}</div>
								<div v-if="row.money_type == 2">{{row.money_percentage}}%</div>
							</template>
						</el-table-column>
						<el-table-column label="佣金类型" prop="commission_type" show-tooltip-when-overflow>
							<template #default="{ row }">
								<div v-if="row.commission_type == 1">固定值</div>
								<div v-if="row.commission_type == 2">百分比</div>
							</template>
						</el-table-column>
						<el-table-column label="佣金" show-overflow-tooltip>
							<template #default="{ row }">
								<div v-if="row.commission_type == 1">{{row.commission}}</div>
								<div v-if="row.commission_type == 2">{{row.commission_percentage}}%</div>
							</template>
						</el-table-column>
						<el-table-column label="操作" width="120" fixed="right">
							<template #default="{ row }">
								<el-button v-perms="['user.user_group_rule/edit']" type="primary" link
									@click="handleEdit(row)">
									编辑
								</el-button>
								<el-button v-perms="['user.user_group_rule/delete']" type="danger" link
									@click="handleDelete(row.id)">
									删除
								</el-button>
							</template>
						</el-table-column>
					</el-table>
				</div>
				<div class="flex mt-4 justify-end">
					<pagination v-model="pager" @change="getLists" />
				</div>
			</el-card>
			<edit-popup v-if="showEdit" ref="editRef" @success="getLists" @close="showEdit = false" />
		</div>
	</popup>
</template>

<script lang="ts" setup name="userGroupRuleLists">
	import Popup from '@/components/popup/index.vue'
	import { usePaging } from '@/hooks/usePaging'
	import { apiUserGroupRuleLists, apiUserGroupRuleDelete } from '@/api/user_group'
	import feedback from '@/utils/feedback'
	import EditPopup from './edit.vue'

	const emit = defineEmits(['success', 'close'])
	const popupRef = shallowRef<InstanceType<typeof Popup>>()

	// 弹窗标题
	const popupTitle = computed(() => {
		return '分组规则'
	})

	const editRef = shallowRef<InstanceType<typeof EditPopup>>()
	// 是否显示编辑框
	const showEdit = ref(false)


	// 查询条件
	const queryParams = reactive({
		group_id: '',
	})

	// 选中数据
	const selectData = ref<any[]>([])

	// 表格选择后回调事件
	const handleSelectionChange = (val : any[]) => {
		selectData.value = val.map(({ id }) => id)
	}

	// 分页相关
	const { pager, getLists, resetParams, resetPage } = usePaging({
		fetchFun: apiUserGroupRuleLists,
		params: queryParams
	})

	// 添加
	const handleAdd = async () => {
		showEdit.value = true
		await nextTick()
		editRef.value?.open('add')
		editRef.value?.setFormData({group_id:queryParams.group_id})
	}

	// 编辑
	const handleEdit = async (data : any) => {
		showEdit.value = true
		await nextTick()
		editRef.value?.open('edit')
		editRef.value?.setFormData(data)
	}

	// 删除
	const handleDelete = async (id : number | any[]) => {
		await feedback.confirm('确定要删除？')
		await apiUserGroupRuleDelete({ id })
		getLists()
	}

	//打开弹窗
	const open = () => {
		popupRef.value?.open()
	}

	// 关闭回调
	const handleClose = () => {
		emit('close')
	}

	const setFormData = async (data : Record<any, any>) => {
		queryParams.group_id = data.group_id
		getLists()
	}

	defineExpose({
		open,
		setFormData
	})
</script>